<template>
  <div style="width: auto; height: 245px; overflow-y: auto">
    <div
      slot="header"
      class="clearfix fsize"
      style="font-size: 16px; font-weight: bold; margin-bottom: 15px"
    >
      <span>通知/公告</span>
    </div>
    <div class="text" style="text-align: center">
      <li
        class="notice_item"
        v-for="item in notice_list"
        :key="item.notice_id"
        style="list-style: none; font-size: 14px; margin-bottom: 3px"
        @click="handClick(item)"
      >
        <span class="overflow-text">【{{ item.notice_title }}】</span>
        <span class="unix">{{
          new Date(item.create_time * 1000).toLocaleString()
        }}</span>
      </li>
    </div>
    <!--    <el-collapse v-model="activeName" accordion>-->
    <!--      <el-collapse-item-->
    <!--        v-for="item in notice_list"-->
    <!--        :key="item.notice_id"-->
    <!--        :name="item.notice_id"-->
    <!--      >-->
    <!--        <template slot="title">-->
    <!--          <i-->
    <!--            style="margin-right: 30px; font-size: 16px"-->
    <!--            class="header-icon el-icon-message-solid"-->
    <!--          ></i-->
    <!--          >{{ item.notice_title }}-->
    <!--        </template>-->
    <!--        <div>{{ item.notice_content }}</div>-->
    <!--        <div>-->
    <!--          {{ new Date(item.create_time * 1000).toLocaleString() }}-->
    <!--        </div>-->
    <!--      </el-collapse-item>-->
    <!--    </el-collapse>-->
  </div>
</template>

<script>
import { getUserNotice } from "@/api/index";

export default {
  data() {
    return {
      notice_list: [],
      activeName: 1,
    };
  },
  mounted() {
    this.getUserNotice();
  },
  methods: {
    async getUserNotice() {
      let res = await getUserNotice();
      console.log(res);
      if (res.data.status === 200) {
        this.notice_list = res.data.data.data;
        this.notice_list.reverse();
      }
    },
    handClick(item) {
      this.$alert(item.notice_content, {
        dangerouslyUseHTMLString: true,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.text {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;

  .notice_item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 30px;
    color: #2e82ff;
    border-bottom: 1px solid #ededed;
    width: 420px;

    .overflow-text {
      display: inline-block;
      width: 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      cursor: pointer;
      color: #24acf2;
    }

    .unix {
      font-size: 10px;
    }
  }
}

::v-deep .el-collapse-item__header {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  font-family: "Microsoft YaHei";
  text-align: center;
}
</style>
